<template>
  <van-nav-bar title="分销信息" left-text="" left-arrow @click-left="goBack" />
  <div class="qrcode-container">
      <h3>网站推荐二维码</h3>
      <div>
          <qrcode
          :value="qrcodeValue"
          :size="300"
          color="#000000"
          background-color="#ffffff"
          />
      </div>
  </div>

  <div class="link">
      <input id="url" v-model="qrcodeValue" type="text" readonly />
      <van-button type="success" @click="copy">
          点击复制
      </van-button>
  </div>

</template>

<script setup>
import { error } from "jquery";
import { ref } from "vue";
import Qrcode from "vue-qrcode";
const { proxy } = getCurrentInstance();
const goBack = () => { proxy.$router.push('/business/index') }
let LoginUser = reactive(
  proxy.$cookies.get("LoginUser") ? proxy.$cookies.get("LoginUser") : {}
);
const qrcodeValue = ref("");
// 在组件挂载时获取协议和域名
onMounted(() => {
  // 获取协议和域名
  qrcodeValue.value = `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ''}/#/business/login?parentid=${LoginUser.id}`;
});
const copy = () => {
    const input = document.getElementById('url');
    input.select();
    if (document.execCommand('copy')) {
        document.execCommand('copy');
        success("复制成功");
    }else{
        error("复制失败");
    }
};

</script>

<style scoped>
.qrcode-container {
  text-align: center;
  margin-top: 20px;
}
.link{
    width:90%;
    margin:0 auto;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    background:#fff;
    padding:10px;
}

.link input {
  /* 基础样式 */
  padding: 8px 12px;
  border: 2px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  color: #333;
  transition: all 0.3s ease;
  outline: none; /* 去掉默认的焦点边框 */
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  /* 根据内容自动调整宽度 */
  width: auto;
  min-width: 100px; /* 最小宽度 */
  max-width: 300px; /* 最大宽度 */
  white-space: nowrap; /* 防止内容换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
}
</style>
